<template>
  <div>
    <div class="left">
      <div style="height:60vh" class="timu">
        <el-col>
          <div>
            <h3>{{index}}- {{currentList}} </h3>
            <!-- <button class="btn" @click="tips">tips</button> -->
            <el-checkbox-group class="nei" v-model="userAnswers" v-for="(item,index) in JSON.parse(currentAnswers)" :key="index">
              <el-checkbox style="display:inline;fontSize:16px" :label="item.index" @change="checkAnswers(item)"> {{item.index}} ) {{item.value}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-col>
      </div>
      <div class="btns">
        <el-button type="primary" @click="last" :disabled="flag">上一题</el-button>
        <el-button type="primary" v-show="sub" @click="onSubmit">提交</el-button>
        <el-button type="primary" @click="next" :disabled="flags" v-show="sub1"> 下一题
          </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      index: 1,
      flag: false,
      flags: false,
      userAnswers: [],
      sub: false,
      sub1: true
    };
  },
  methods: {
    onSubmit () {
      alert('提交成功,3秒后回到首页')
      setTimeout(() => {
        this.$router.push("/Dashboard");
      }, 3000);
      this.userAnswers.sort()
      this.examlist[this.current]['nowanswer'] = JSON.stringify(this.userAnswers)
      let r = this.examlist.map(i => {
        return JSON.parse(i.nowanswer).join(',')
      })
      // console.log(r)
      // console.log(r[this.current])
      // if(JSON.parse(r))
      // console.log(JSON.parse(r[0]))
      // if(r)

    },
    tips () {
      alert(this.tipsList)
      // console.log(this.tipsList)
    },
    checkAnswers (item) {

    },
    ...mapActions('examModule', ['getExam']),
    ...mapMutations('examModule', ['SET_CURRENT']),
    next () {
      this.userAnswers.sort()
      this.examlist[this.current]['nowanswer'] = JSON.stringify(this.userAnswers)
      this.SET_CURRENT(this.current + 1)
      this.index++
      if (this.current >= 1) {
        this.flag = false
      }
      if (this.current == this.total - 1) {
        this.flags = true
        this.sub = true
        this.sub1 = false
      }
      this.userAnswers = this.examlist[this.current].nowanswer ? JSON.parse(this.examlist[this.current].nowanswer) : []
    
    },
    last () {
      this.userAnswers.sort()
      this.examlist[this.current]['nowanswer'] = JSON.stringify(this.userAnswers)
      if (this.current < this.total) {
        this.flags = false
        this.sub = false
        this.sub1 = true
      }
      if (this.current < 2) {
        this.flag = true
        // console.log(this.current)
      }
      this.SET_CURRENT(this.current - 1)
      this.index--
      this.userAnswers = this.examlist[this.current].nowanswer ? JSON.parse(this.examlist[this.current].nowanswer) : []
      // console.log(this.current)
    }
  },
  async mounted () {
    await this.getExam()
    if (this.current == 0) {
      this.flag = true
    }
    // console.log(this.examlist)
  },
  computed: {
    ...mapState('examModule', ['examlist', 'currentPage', 'total']),
    current () {
      return this.currentPage
    },
    currentList () {
      return this.examlist.length && this.examlist[this.current].title
      // console.log(this.examList.length)
    },
    tipsList () {
      return this.examlist.length && this.examlist[this.current].tips
    },
    currentAnswers () {
      return this.examlist.length && this.examlist[this.current].options
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}

.app-container {
  display: flex;
  justify-content: space-between;
}

.app-container > div {
  width: 50%;
}

.btns {
  margin: 15px 0;
}

.btns > button {
  margin: 0 12px;
}

.title-nums > li {
  float: left;
  width: 30px;
  height: 22px;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 2px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
}

.title-nums > li:hover {
  background-color: rgba(252, 248, 213, 0.753);
  color: rgb(26, 30, 252);
}

.hover {
  background-color: rgb(0, 183, 255, 0.7);
}

.nei {
  padding: 15px;
}

.percent {
  width: 126px;
  height: 126px;
  position: relative;
  margin: 216px 260px;
  display: flex;
}

.percent > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
</style>